<template>
  <div style="padding-bottom:70px;position:relative;">
    <el-row class="nav">
      <el-col :span="6"
              style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
        <!-- <i class="el-icon-arrow-left"
           @click="goBack"></i> -->
        <span :to="{ path: '/' }"></span>
        <span class="font-weight rebuild_order"
              style="width:100%"
              :to="{ path: '/' }"
              v-if="litileTitle.length < 16">{{ litileTitle }}</span>
        <el-tooltip class="item"
                    effect="dark"
                    :content="litileTitle"
                    placement="top"
                    v-else>
          <span class="font-weight rebuild_order"
                style="width:100%"
                :to="{ path: '/' }">{{ litileTitle }}</span>
        </el-tooltip>
      </el-col>
      <el-col :span="18">
        <el-button @click="orderUrge"
                   v-if="btnStates.EWS_reminder_015 && (tag != 2 && tag != 1)"
                   type="button"
                   class="el-button el-button--primary el-button--medium h30Btn  fr ">催单
        </el-button>
        <el-button @click="isMonitor('Y')"
                   type="button"
                   v-if="btnStates.EWS_order_attention_026 && isMonitorType != 'Y' && tag != 2"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">关注</el-button>
        <el-button @click="isMonitor('N')"
                   type="button"
                   v-if="btnStates.EWS_order_attention_026 && isMonitorType == 'Y' && tag != 2"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">取消关注</el-button>
        <el-button @click="isRes"
                   type="button"
                   v-if="btnStates.EWS_is_response_014 && tag != 2"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">是否有责</el-button>
        <el-button @click="orderError"
                   type="button"
                   v-if="btnStates.EWS_error_sign_013 && tag != 2"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">差错标记</el-button>
        <el-button @click="orderOpinion"
                   type="button"
                   v-if="btnStates.EWS_add_opinion_012 && tag != 2"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">追加日志</el-button>
        <el-button @click="contactOrderList"
                   v-if="btnStates.EWS_contact_order_030"
                   type="button"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">关联工单</el-button>
        <el-button @click="mergeOrderList"
                   type="button"
                   v-if="btnStates.EWS_merge_order_025"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">合并工单</el-button>
        <el-button @click="sendPersonFun"
                   type="button"
                   v-if="btnStates.EWS_copy_send_031"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">抄送</el-button>
        <el-button @click="relationOrder('新建关联工单')"
                   type="button"
                   v-if="btnStates.EWS_create_contact_order_011"
                   class="el-button el-button--primary el-button--medium h30Btn  fr">新建关联工单</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="40">
      <!-- 左侧属性显示 -->
      <el-col :span="6"
              class="left">
        <p class="left_title"
           v-if="btnStates.EWS_customerInfoConfMapper_40">客户基本信息</p>
        <el-form :model="customBasicInfo"
                 v-if="btnStates.EWS_customerInfoConfMapper_40"
                 label-width="97px">
          <el-form-item label="公司名称：">{{customBasicInfo.companyName}}</el-form-item>
          <el-form-item label="客户姓名：">{{customBasicInfo.customerName}}</el-form-item>
          <el-form-item label="客户性别：">{{sexValue(customBasicInfo.customerSex)}}</el-form-item>
          <el-form-item label="联系电话：">{{customBasicInfo.tel}}</el-form-item>
          <!-- <el-form-item label="证件类型：">{{customBasicInfo.idType}}</el-form-item>
          <el-form-item label="证件号码：">{{customBasicInfo.idNumber}}</el-form-item> -->
          <el-form-item label="邮箱：">{{customBasicInfo.email}}</el-form-item>
        </el-form>
        <el-divider v-if="btnStates.EWS_customerInfoConfMapper_40"></el-divider>
        <p class="left_title">基础信息</p>
        <el-form :model="ruleForm"
                 label-width="97px">
          <el-form-item label="编号：">{{ ruleForm.id }}</el-form-item>
          <el-form-item label="状态：">{{ ruleForm.statusName }}</el-form-item>
          <el-form-item label="当前节点：">{{
            ruleForm.currentWorkOrderNodeName
          }}</el-form-item>
          <el-form-item label="当前处理人：">{{ruleForm.currentHandlerName}}</el-form-item>
          <el-form-item label="创建人：">{{
            ruleForm.createUserName
          }}</el-form-item>
          <el-form-item label="创建时间：">{{
            ruleForm.createTime
          }}</el-form-item>
          <el-form-item label="工单关注人："
                        v-if="ruleForm.isMonitorShow=='Y'">{{
            ruleForm.workOrderMonitor
          }}</el-form-item>
          <el-form-item label="工单抄送人："
                        v-if="ruleForm.isSenderShow =='Y'">{{
            ruleForm.workOrderSender
          }}</el-form-item>
        </el-form>
        <el-divider v-if="btnStates.EWS_create_contact_order_011"></el-divider>
        <el-form label-width="97px"
                 v-if="btnStates.EWS_create_contact_order_011">
          <p class="left_title">关联工单</p>
          <div v-if="relevanceList.length > 0"
               class="relevanceList">
            <el-carousel :indicator-position="'none'"
                         :autoplay="false"
                         trigger='click'
                         :height="relevanceList.length*60+'px'"
                         @change="changeCurrentPage">
              <el-carousel-item v-for="(items, index) in contactPageNums"
                                :key="index"
                                :name="items">
                <ul>
                  <li v-for="(item,index2) in relevanceList"
                      :key="index2">
                    <el-row class="el_row">
                      <el-col :span="12">
                        <el-button type="text"
                                   class="order_num"
                                   @click="enterCurrentDetails(item.id)">{{ item.id }}</el-button>
                      </el-col>
                      <el-col :span="12">
                        <el-button class="el-button el-button--primary el-button--medium h30Btn fr"
                                   size="mini"
                                   @click="cancleConcatWorkOrder(item.id)">取消关联</el-button>
                      </el-col>
                    </el-row>
                    <!-- <p class="problemDesc">标题:{{ item.title }}</p> -->
                  </li>
                </ul>
              </el-carousel-item>
            </el-carousel>
            <ul class="pageCrud">
              <li v-show="contactTotal>contactPageSize"
                  v-for="(item,index) in contactPageNums"
                  :class="index == cantactIndex?'currentActive':''"
                  :key="index"
                  @click="changeCurrentPage(index)"></li>
            </ul>
          </div>
          <div class="relevanceList norelevanceList"
               v-else>
            <p class="no_tip">暂无关联工单</p>
          </div>
        </el-form>
        <el-divider v-if="btnStates.EWS_merge_order_025"></el-divider>
        <!-- 父工单 -->
        <el-form label-width="97px"
                 v-if="btnStates.EWS_merge_order_025">
          <p class="left_title">父工单</p>
          <div class="relevanceList"
               v-if="parentOrderList.length > 0">
            <el-carousel :indicator-position="'none'"
                         :autoplay="false"
                         trigger="click"
                         @change="changeParentCurrentPage"
                         :height="parentOrderList.length*60+'px'">
              <el-carousel-item v-for="(items, index) in parentPageNums"
                                :key="index"
                                :name="items">
                <ul>
                  <li v-for="(item,index2) in parentOrderList"
                      :key="index2">
                    <el-row class="el_row">
                      <el-col :span="12">
                        <el-button type="text"
                                   class="order_num"
                                   @click="enterCurrentDetails(item.id)">{{ item.id }}</el-button>
                      </el-col>
                    </el-row>
                    <!-- <span class="problemDesc">标题:{{ item.title }}</span> -->
                  </li>
                </ul>
              </el-carousel-item>
            </el-carousel>
            <ul class="pageCrud">
              <li v-show="parentTotal>parentPageSize"
                  v-for="(item,index) in parentPageNums"
                  :class="index == parentIndex?'currentActive':''"
                  :key="index"
                  @click="changeParentCurrentPage(index)"></li>
            </ul>
          </div>
          <div class="relevanceList norelevanceList"
               v-else>
            <p class="no_tip">暂无父工单</p>
          </div>
        </el-form>
        <el-divider v-if="btnStates.EWS_merge_order_025"></el-divider>
        <!-- 子工单 -->
        <el-form label-width="97px"
                 style="padding-bottom:20px"
                 v-if="btnStates.EWS_merge_order_025">
          <p class="left_title">子工单</p>
          <div class="relevanceList"
               v-if="childOrderList.length > 0">
            <el-carousel :indicator-position="'none'"
                         :autoplay="false"
                         trigger="click"
                         @change="changeChildCurrentPage"
                         :height="childOrderList.length*60+'px'">
              <el-carousel-item v-for="(items, index) in childPageNums"
                                :key="index"
                                :name="items">
                <ul>
                  <li v-for="(item,index2) in childOrderList"
                      :key="index2">
                    <el-row>
                      <el-col :span="12">
                        <el-button type="text"
                                   class="order_num"
                                   @click="enterCurrentDetails(item.id)">{{ item.id }}</el-button>
                      </el-col>
                    </el-row>
                    <!-- <p class="problemDesc">标题:{{ item.title }}</p> -->
                  </li>
                </ul>
              </el-carousel-item>
            </el-carousel>
            <ul class="pageCrud">
              <li v-show="childrenTotal>childPageSize"
                  v-for="(item,index) in childPageNums"
                  :class="index == childIndex?'currentActive':''"
                  :key="index"
                  @click="changeChildCurrentPage(index)"></li>
            </ul>
          </div>
          <div class="relevanceList norelevanceList"
               v-else>
            <p class="no_tip">暂无子工单</p>
          </div>
        </el-form>
      </el-col>
      <!-- 右侧详情展示 -->
      <el-col :span="18">
        <!-- 信息详情展示 -->
        <handle-form-template v-if="ruleForm"
                              :ruleFormInfo="ruleForm"
                               @removeTab="removeTab"
                              :isFlowButtonShowValue="isFlowButtonShow"></handle-form-template>
        <!-- 日志部分展示 -->
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 v-if="btnStates.EWS_all_log_017"
                 @select="handleSelect">
          <el-menu-item index>
            <el-badge class="item_log"> 操作记录 </el-badge>
          </el-menu-item>
          <el-menu-item index="1">
            <el-badge :value="value1"
                      class="item_log"> 追加日志 </el-badge>
          </el-menu-item>
          <el-menu-item index="2">
            <el-badge :value="value2"
                      class="item_log"> 催单 </el-badge>
          </el-menu-item>
        </el-menu>
        <!-- 日志列表 -->
        <el-timeline class="relevanceList logUl"
                     v-if="btnStates.EWS_all_log_017">
          <el-timeline-item v-for="(item, index) in logList"
                            :key="index"
                            :timestamp="item.timestamp"
                            size="large">
            <el-row :gutter="20">
              <el-col :span="8">{{ item.createUserRoleNameStr
                }}{{
                  item.logCreaterName ? ":" + item.logCreaterName : ""
                }}</el-col>
              <el-col :span="10">{{ timestampToTime(item.logCreateTime) }}</el-col>
              <el-col :span="6">{{ item.logType }}</el-col>
            </el-row>
            <p class="problemDesc">{{ item.content }}</p>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
    <!-- 催单 -->
    <reminder v-if="reminderShow"
              @changeShow="orderUrgeHide"></reminder>
    <!-- 差错标记组件 -->
    <sign-error v-if="errorShow"
                @changeShow="orderErrorHide"></sign-error>
    <!-- 追加意见 -->
    <opinon v-if="opinionShow"
            @changeShow="opinionHide"></opinon>
    <!-- 是否有责 -->
    <is-response v-if="isResponse"
                 @changeShow="isResHide"></is-response>
    <!-- 关联工单/合并工单弹框 -->
    <contact-dialog v-if='contactDialogVisible'
                    :contactType="contactType"
                    :contactTitle="contactTitle"
                    @hadleFormdetails="hadleFormdetails"
                    @changeShow="isContactShow"></contact-dialog>
    <!-- 抄送 -->
    <el-dialog title="工单抄送"
               v-dialogDrag
               class="send_dialog"
               :visible.sync="sendDialogVisible"
               :before-close="handleClose">
      <p style="padding-bottom: 10px">将工单抄送给以下人员</p>
      抄送给：<el-select v-model="sendPerson"
                 placeholder="请选择"
                 multiple
                 clearable
                 filterable
                 style="width:80%">
        <el-option v-for="item in sendPersonList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer"
            class="dialog-footer">
        <el-button class="el-button el-button--primary el-button--medium h30Btn"
                   @click="sendDialogVisible = false">取 消</el-button>
        <el-button class="el-button el-button--primary el-button--medium h30Btn"
                   type="primary"
                   @click="sendDialogVisibleFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteReminder,
  getConcatWorkOrderList,
  cancleConcatWorkOrder,
  getLoglist,
  getProcessMessage,
  workOrderRecieve,
  getCombineWorkOrderInfo,
  monitorAndCancelWorkOrder,
  selectAll
} from "@/api/workOrderController";
import { handleSender } from "@/api/workOrderRelation"
import nodeForm from "@/components/common/nodeForm";
import common from "@/common/common.js";
import reminder from "@/views/orderDataList/orderDialog/reminder";
import signError from "@/views/orderDataList/orderDialog/signError";
import opinon from "@/views/orderDataList/orderDialog/addOpinion";
import isResponse from "@/views/orderDataList/orderDialog/isResponse";
import contactDialog from "@/views/orderDataList/orderDialog/contactDialog";
import handleFormTemplate from "./handleFormTemplate";
// logType 空-- 所有日志 1--追加意见 2--催单 5--差错标记 6--是否有责
export default {
  inject: ["reload"], // 引入页面同步刷新的依赖
  // name:'formDetails',
  data () {
    return {
      itemType: window.CONFIG.itemType,
      btnStates: window.CONFIG.btnState,
      // 关联/父/子工单列表数据(目前只定义了关联处的)
      contactPage: 1,
      contactPageSize: 5,
      contactTotal: 0,
      contactCurrentPage: this.contactPage,
      contactPageNums: 1,
      cantactIndex: 0,
      // contactCount: 0,
      relevanceList: [], // 关联工单列表
      // 父工单
      parentPage: 1,
      parentPageSize: 5,
      parentTotal: 0,
      parentCurrentPage: this.contactPage,
      parentPageNums: 1,
      parentOrderList: [], // 父工单
      parentIndex: 0,
      // 子工单
      childPage: 1,
      childPageSize: 5,
      childrenTotal: 0,
      childCurrentPage: this.contactPage,
      childPageNums: 1,
      childOrderList: [], // 子工单
      childIndex: 0,
      // end
      contactTitle: "",
      contactType: '',
      contactDialogVisible: false,
      sendDialogVisible: false,
      sendPersonList: [],
      sendPerson: '',
      isFlowButtonShow: false, // 流程按钮是否显示
      value1: 0,
      value2: 0,
      activeNames: ["0"], // 手风琴效果默认选中第一条
      loading: true,
      reminderShow: false,
      errorShow: false,
      opinionShow: false,
      isResponse: false,
      tag: "",
      workOrderNodeDtoList: "",
      workOrderUrgeList: [],
      problemDesc: "",
      litileTitle: "详情",
      ruleForm: {},
      reminderList: [],
      getJsonData: "",
      logList: [], // 日志列表
      institution: "", // 涉及机构
      currentPage: "", // 当前页
      pageSize: "", // 页数量
      distributionWay: "", // 领取工单按钮的显示
      isMonitorType: "N", //  是否关注
      customBasicInfo: { // 客户基本信息
        companyName: '',
        customerName: '',
        customerSex: '',
        tel: '',
        idType: '',
        idNumber: '',
        email: ''
      }
    };
  },
  computed: {
    sexValue: function () {
      return function (val) {
        if (val == 'male') {
          return '男'
        } else if (val == 'female') {

          return '女'
        } else {
          return ""
        }
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'orderTable' && this.itemType !== '3') {
      to.meta.isUseCache = true
    } else {
      to.meta.isUseCache = false
    }
    next()

  },
  watch: {
  },
  components: {
    nodeForm,
    reminder,
    signError,
    opinon,
    isResponse,
    handleFormTemplate,
    contactDialog
  },
  created () {
    this.GetQueryString('orderId') ? this.$store.state.orderDetailsId = this.GetQueryString('orderId') : ''
  },
  mounted () {
    this.handleSelect("");
    if (this.$store.state.orderDetailsId) {
      this.getProcessMessageInfo();
    }
  },

  methods: {
    reloads () {
      this.getProcessMessageInfo();
      this.handleSelect()
      this.getConcatWorkOrderList()
      this.getParentCombineWorkOrderInfo()
      this.getChildCombineWorkOrderInfo()
    },
    removeTab () {
      this.$emit("removeTab", this.$store.state.orderDetailsId);
    },
    changeCurrentPage (val) {
      this.cantactIndex = val
      this.contactPage = val + 1
      this.getConcatWorkOrderList()
    },
    changeParentCurrentPage (val) {
      this.parentIndex = val
      this.parentPage = val + 1
      this.getParentCombineWorkOrderInfo()
    },
    changeChildCurrentPage (val) {
      this.childIndex = val
      this.childPage = val + 1
      this.getChildCombineWorkOrderInfo()
    },
    enterCurrentDetails (id) {
      this.$store.commit("orderDetailsIdFun", id); // 工单编号的id
      this.$emit("hadleFormdetails", id);
      // this.$router.push('/formDetails/' + this.$store.state.orderDetailsId)
      // this.reload()
    },
    sendDialogVisibleFun () {
      let params = {
        workOrderId: this.$store.state.orderDetailsId,
        sender: this.sendPerson.join(",")
      }
      if (!params.sender) {
        this.sendDialogVisible = false
        return
      }
      handleSender(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            message: "抄送成功",
            type: "success"
          })
          this.sendDialogVisible = false
          this.reloads()
        }
      })
    },
    sendPersonFun () {
      this.selectAllRoleInfo()
      this.sendDialogVisible = true
    },
    selectAllRoleInfo () {
      let id = "user"
      selectAll(id).then(res => {
        if (res.data.retCode == 200) {
          this.sendPersonList = res.data.data
        }
      })
    },
    // 合并/关联
    isContactShow (e) {
      this.contactDialogVisible = e
      this.getConcatWorkOrderList()
    },
    // 关联工单
    contactOrderList () {
      this.contactDialogVisible = true
      this.contactType = "1"
      this.contactTitle = "关联工单"
    },
    // 合并工单
    mergeOrderList () {
      this.contactDialogVisible = true
      this.contactType = "2"
      this.contactTitle = "合并工单"
    },
    GetQueryString (name) {
      if (window.location.hash.split("?").length <= 1) {
        return null;
      }
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.hash.split("?")[1].match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 获取客户信息
    customerInfoConfMapper (val) {
      this.ruleForm.phone = val
      let params = window.CONFIG.CRMParams
      // params.filters[0].value = this.ruleForm.customIdentify1
      let _this = this
      let filterValues = [
        {
          "cond": 0,
          "name": "tel",
          "value": val
        },
        {
          "cond": 0,
          "name": "tel1",
          "value": val
        }, {
          "cond": 0,
          "name": "tel2",
          "value": val
        }, {
          "cond": 0,
          "name": "contact_person1_tel",
          "value": val
        }, {
          "cond": 0,
          "name": "contact_person2_tel",
          "value": val
        }]
      params.filters = filterValues
      // params.filters[0].name = 'tel'
      // params.filters[0].value = '15002079436'
      axios.post(window.CONFIG.CRMUrl, params).then(function (res) {
        if (res.data.code == 200) {
          if (res.data.data) {
            if (res.data.data.listData.length > 0) {
              _this.customBasicInfo.companyName = res.data.data.listData[0].companyName || ''
              _this.customBasicInfo.customerName = res.data.data.listData[0].customerName || ''
              _this.customBasicInfo.customerSex = res.data.data.listData[0].customerSex || ''
              _this.customBasicInfo.tel = val
              _this.customBasicInfo.idType = res.data.data.listData[0].idType || ''
              _this.customBasicInfo.idNumber = res.data.data.listData[0].idNumber || ''
              _this.customBasicInfo.email = res.data.data.listData[0].email || ''
            }
          }
        }
      })
    },
    // 关注和取消关注
    isMonitor (type) {
      let params = {
        id: this.$store.state.orderDetailsId,
        userId: this.$store.state.userId,
        isMonitor: type
      };
      monitorAndCancelWorkOrder(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            type: "success",
            message: res.data.msg
          });
          this.reloads()
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    changeVal () {
      this.getProcessMessageInfo();
    },
    // 领取工单
    getCurrentOrder () {
      // 领取工单的接口
      let params = {
        workOrderId: this.$store.state.orderDetailsId,
        userId: this.$store.state.userId,
        processInstanceId: this.ruleForm.processInstanceId,
        currentWorkOrderNodeId: this.ruleForm.startNodeDto.nodeId,
        workOrderStatusId: this.ruleForm.statusId,
        distributeWay: this.ruleForm.distributionWay || ""
      };
      workOrderRecieve(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            type: "success",
            message: res.data.msg
          });
          // 刷新当前页面
          this.reloads();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    // 查询日志列表
    handleSelect (val) {
      if (!this.$store.state.orderDetailsId) {
        return;
      }
      let params = {
        logType: val,
        workOrderId: this.$store.state.orderDetailsId,
        // 暂时处理
        currentPage: 1,
        pageSize: 1000
      };
      // 记录日志的条数
      getLoglist(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          if (!val) {
            this.value1 = 0;
            this.value2 = 0;
            data.data.forEach(item => {
              if (item.logType === "追加日志") {
                this.value1++;
              } else if (item.logType === "催单") {
                this.value2++;
              }
            });
          }
          this.logList = data.data;
        }
      });
    },
    handleCollapseChangle () { },
    // 时间戳转换
    timestampToTime (timestamp) {
      return common.timestampToTime(timestamp);
    },
    // 取消关联工单
    cancleConcatWorkOrder (id) {
      let params = {
        currentWorkOrderId: this.$store.state.orderDetailsId,
        concatWorkOrderId: id
      };
      cancleConcatWorkOrder(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.$message({
            type: "success",
            message: data.msg
          });
          this.getConcatWorkOrderList()
        }
      });
    },
    goBack () {
      if (!this.$store.state.orderDetailsId) {
        this.$router.push("/orderTable/" + this.$store.state.orderTypeId)
      } else {
        this.$router.go(-1)
      }
      this.reloads()
      if (this.$store.state.orderTypeId === 4) {
        this.$router.push("/orderHisoryData/" + this.$store.state.orderTypeId);
      } else {
        this.$router.push("/orderTable/" + this.$store.state.orderTypeId);
      }
    },
    hadleFormdetails (val, list) {
      this.$emit("hadleFormdetails", val, list);
    },
    // 新建关联工单
    relationOrder (val) {
      // this.$router.push("/createForm");
      this.$emit("hadleFormdetails", '新建关联工单', this.$store.state.orderDetailsId);
      sessionStorage.setItem(
        "workOrderIdList",
        this.$store.state.orderDetailsId
      ); // 当前工单的id
      this.$store.commit("orderTitleFun", "新建关联工单");
      sessionStorage.setItem("workbenchInfoFun", ""); // 新建工单页面进入的时候不带客户进线过来的信息
    },
    // 是否有责
    isRes () {
      this.isResponse = true;
      sessionStorage.setItem(
        "workOrderIdList",
        this.$store.state.orderDetailsId
      );
    },
    // 是否有责框关闭
    isResHide () {
      this.isResponse = false;
      this.handleSelect();
    },
    // 差错标记
    orderError () {
      this.errorShow = true;
      sessionStorage.setItem("workOrderIdList", this.$store.state.orderDetailsId);
    },
    // 差错标记弹窗关闭
    orderErrorHide (e) {
      this.errorShow = e;
      this.handleSelect();
    },
    // 追加意见弹窗打开
    orderOpinion () {
      this.opinionShow = true;
    },
    // 追加意见弹窗关闭
    opinionHide (e) {
      this.opinionShow = e.value;
      if (e.name === 'submit') {
        this.handleSelect();
      }
    },
    // 催单按钮点击
    orderUrge () {
      this.reminderShow = true
      let data = [this.ruleForm.id];
      sessionStorage.setItem("workOrderIdList", JSON.stringify(data));
    },
    // 催单弹框关闭
    orderUrgeHide (e) {
      this.reminderShow = e.value;
      if (e.name == "submit") {
        this.handleSelect();
      }
    },
    getMsg (data) {
      this.getJsonData = data;
    },
    // 获取关联工单列表
    getConcatWorkOrderList () {
      let concatParams = {
        pageNumber: this.contactPage,
        pageSize: this.contactPageSize,
        workOrderId: this.$store.state.orderDetailsId
      }
      getConcatWorkOrderList(concatParams).then(res => {
        if (res.data.retCode === 200) {
          let data = res.data.data
          this.relevanceList = data ? data : []
          this.contactTotal = res.data.count
          this.contactPageNums = Math.ceil(res.data.count / this.contactPageSize)
        }
      })
    },
    // 获取父合并工单关联信息
    getParentCombineWorkOrderInfo () {
      let params = {
        pageNumber: this.parentPage,
        pageSize: this.parentPageSize,
        combineType: 'parent',
        workOrderId: this.$store.state.orderDetailsId
      }
      getCombineWorkOrderInfo(params).then(
        res => {
          if (res.data.retCode === 200) {
            this.parentOrderList = res.data.data
            this.parentTotal = res.data.count
            this.parentPageNums = Math.ceil(res.data.count / this.parentPageSize)
          }
        }
      )
    },
    // 获取子合并工单
    getChildCombineWorkOrderInfo () {
      let params = {
        pageNumber: this.childPage,
        pageSize: this.childPageSize,
        combineType: 'child',
        workOrderId: this.$store.state.orderDetailsId
      }
      getCombineWorkOrderInfo(params).then(
        res => {
          if (res.data.retCode === 200) {
            this.childOrderList = res.data.data
            this.childrenTotal = res.data.count
            this.childPageNums = Math.ceil(res.data.count / this.childPageSize)
          }
        }
      )
    },
    async getProcessMessageInfo () {
      let params = {
        id: this.$store.state.orderDetailsId,
        userId: this.$store.state.userId
      }
      getProcessMessage(params).then(res => {
        let data = res.data;
        let _this = this;
        if (data.retCode === 200) {
          _this.isMonitorType = data.data.isMonitor;
          _this.ruleForm = data.data;
          _this.$store.commit("workOrderTypeIdFun", _this.ruleForm.workOrderTypeId)
          if (_this.ruleForm.customField.phone_number && this.btnStates.EWS_customerInfoConfMapper_40) {
            _this.customerInfoConfMapper(_this.ruleForm.customField.phone_number)
          }
          if (_this.ruleForm.distributionWay) {
            _this.isFlowButtonShow = false;
          } else {
            _this.isFlowButtonShow = true;
          }
          _this.tag = data.data.contrOptionTag;
          _this.distributionWay = data.data.distributionWay;
          _this.loading = false;
          _this.$store.commit(
            "workOrderTypeIdFun",
            _this.ruleForm.workOrderTypeId
          )
          // 催单列表
          if (data.data.workOrderUrgeList === null) {
            _this.reminderList = [];
          } else {
            _this.reminderList = data.data.workOrderUrgeList;
          }
          // 问题分类数据转换
          let arr = []
          // _this.ruleForm.classifyValueArray = []
          if (_this.ruleForm.classifyValue) {
            if (_this.ruleForm.classifyValue.indexOf(',') < 0) {
              arr.push(Number(_this.ruleForm.classifyValue))
            } else {
              arr = _this.ruleForm.classifyValue.split(',')
              for (var i = 0; i < arr.length; i++) {
                arr[i] = Number(arr[i])
              }
            }
          } else {
            arr = []
          }
          _this.ruleForm.classifyData = arr
        }
      });
      // 关联
      await this.getConcatWorkOrderList()
      // 父合并
      await this.getParentCombineWorkOrderInfo()
      // 子合并
      await this.getChildCombineWorkOrderInfo()
    },
    closeReminder (item, i) {
      deleteReminder(item.id).then(res => {
        if (res.data.retCode === 200) {
          this.$message({
            type: "success",
            message: res.data.msg
          });
        }
      });
    }
  }
};
</script>
<style scoped>
>>> .el-upload-list li {
  pointer-events: auto !important;
}
.left {
  padding: 0 1.5% 0.6%;
}

.left >>> .el-form-item__label {
  text-align: left;
  font-weight: normal;
  color: #231815;
}

.left >>> .el-form-item {
  margin-bottom: 0;
  font-size: 13px;
  color: #231815;
  word-break: break-all;
}

.el-form-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content {
  padding: 0;
}

>>> .el-breadcrumb__separator {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding-top: 1px;
}

>>> .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  font-weight: 700 !important;
  color: #231815;
  font-size: 13px;
}

.el-form-item__label {
  color: #231815;
  font-size: 13px;
}

.rebuild_order {
  font-weight: 600 !important;
  color: #231815 !important;
  font-size: 13px;
  font-family: Microsoft YaHei;
}

li {
  list-style: none;
}

>>> .relevanceList li .el-timeline-item__wrapper {
  /* top: -10px; */
}
.logUl {
  margin-top: 20px;
}

li:last-child {
  border-bottom: none;
}
.norelevanceList {
  text-align: center;
  margin: 10px 0;
  color: #bbbbbb;
}

>>> .historyNode .el-upload .el-button--primary {
  background-color: gray;
}

.item_log >>> .el-badge__content {
  margin-top: 20px;
}

.tsBusinessInfo ul li:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.fr {
  margin-left: 10px;
}
.no_tip {
  margin: 20px;
}
>>> .el-carousel__indicators--outside {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}
.el-carousel__item h3 {
  color: #f8f9fd;
  font-size: 18px;
  opacity: 0.75;
  line-height: 250px;
  margin: 0;
}
.left_title {
  font-weight: 600;
}
>>> .el-carousel__arrow {
  z-index: -10;
}
.problemDesc {
  width: 90%;
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
  word-break: break-word;
  color: #2c3e50;
}
.el_row,
.nav {
  display: flex;
  align-items: center;
}
>>> .el-divider--horizontal {
  margin: 10px 0;
}
.pageCrud {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}
.pageCrud li {
  width: 25px;
  height: 4px;
  margin: 5px;
  cursor: pointer;
  background-color: #e4e7ed;
}
.pageCrud .currentActive {
  background-color: #c0c4cc;
}

.send_dialog {
  left: 10%;
  top: 15%;
}
</style>
